<template>
  <el-container>
    <el-table v-loading="loading" :data="join" border highlight-current-row height="100%">
      <el-table-column label="会议编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发起人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sponsorDetail.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会议主题" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.theme }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="起止时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column label="详情" align="center">
        <template slot-scope="scope">
          <el-button type="primary" :disabled="!scope.row.adjust" @click="more(scope.$index,scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        v-show="total>0"
        :current-page="page"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="size"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-container>
</template>

<script>
import { findMyMeeting } from '@/api/meeting'
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      loading: true,
      join: [],
      total: 0,
      size: 5,
      page: 1
    }
  },
  created() {
    this.userid = this.$store.state.user.id
    this.username = this.$store.state.user.username
    this.getAll()
  },
  methods: {
    async getAll() {
      this.loading = true
      const res = await findMyMeeting(this.page - 1, this.size)
      this.join = res.data.data.content
      this.total = res.data.data.totalElements
      if (this.total) this.filterData()
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    more(index, row) {
      if (row.mine) {
        this.$router.push({ path: `/detailMine/${row.id}` })
      } else {
        this.$router.push({ path: `/detailJoin/${row.id}` })
      }
    },
    filterData() {
      this.join.forEach(data => {
        // console.log(`data:`, data)
        this.transformState(data)
        data.mine = 0
        data.date = parseTime(data.starttime, '{y}-{m}-{d}')
        data.time = `${parseTime(data.starttime, '{h}:{i}')}-${parseTime(data.endtime, '{h}:{i}')}`
        if (data.sponsor === this.userid) {
          data.sponsorDetail.name = `我(${data.sponsorDetail.name})`
          data.mine = 1
        }
        // console.log(`data:`, data)
      })
    },
    handleSizeChange(val) {
      this.size = val
      this.page = 1
      this.getAll()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getAll()
    },
    transformState(data) {
      switch (data.state) {
        case -1:
          data.state = '正在审核'
          break
        case 0:
          data.state = '审核通过'
          break
        case -2:
          data.state = '审核未通过'
          break
        default:
          data.state = '安排中'
          break
      }
    }
  }
}
</script>

<style scoped>
.el-container {
  margin-top: 2em;
  flex-direction: column;
  height: 80%;
}

.pagination-container {
  padding: 32px 16px 0;
}

.pagination-container.hidden {
  display: none;
}

.el-table::before,
.el-table--border::after {
  background-color: #707070;
}

.el-table--border >>> th,
.el-table--border >>> td {
  border-right: none;
}

.el-table {
  /* border: 1px solid #707070;
  border-bottom: none; */
  border-color: #707070;
  background-color: inherit;
  width: 90%;
  margin: 0 auto;
}

.el-table >>> th {
  background-color: #F7F6F6;
}

.el-table >>> th.is-leaf,
.el-table >>> td {
  border-color: #707070;
}
</style>
